<script setup lang="ts">
import type {
  SelectOptions,
  SelectWidget as SelectWidgetType,
} from '../../types'
import { set } from 'lodash-es'
import { ProvideParamsSymbol } from '../../types'

interface IEmit {
  (e: 'search'): void
}

interface IProps {
  config: SelectWidgetType
}

const props = defineProps<IProps>()
const emit = defineEmits<IEmit>()

const params = inject<Ref<Record<string, any>>>(ProvideParamsSymbol)!

const options = computed(() => {
  return props.config._optionsData
})

function handleClick(item: SelectOptions) {
  set(params.value, props.config.field, item.value)
  emit('search')
}
</script>

<template>
  <div class="select-widget">
    <div class="title">
      {{ config.label }}
    </div>
    <div class="select-widget-options">
      <div
        v-for="(item, i) in options"
        :key="i"
        class="select-widget-options-item"
        :class="{
          'select-widget-options-item__active':
            item.value === params[config.field],
        }"
        @click="handleClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.select-widget {
  .title {
    font-size: 12px;
    color: #86909c;
    padding: 12px 8px;
    font-weight: 700;
    border-bottom: 1px solid #f2f3f5;
  }
  &-options {
    padding-top: 8px;
    &-item {
      height: 32px;
      line-height: 32px;
      padding: 0 8px;
      font-size: 12px;
      color: #1d2129;
      margin-bottom: 4px;
      cursor: pointer;
      &:hover,
      &__active {
        background-color: #f7f8fa;
        border-radius: 4px;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
